<div class="gis-map">
  <nz-spin nzTip='数据量较大，请耐心等待...' [nzSpinning]="loading">
    <div id="bmap" [ngStyle]="{ 'height.px': pageH, width: '100%' }">
    </div>
    <div class="gis-map__control-bar">
      <button nz-button nzType="primary" (click)="setResListVisible(true)"
        [disabled]="loading">资源列表</button>
      <button nz-button nzType="primary" (click)="showLightLite()"
        [disabled]="loading">显示所有资源</button>
        <button nz-button nzType="primary" (click)="showPointCluster()"
        [disabled]="loading">聚合视图</button>
      <button nz-button nzType="primary" (click)="resetMap()"
        [disabled]="loading">重置地图</button>
    </div>
    <!-- 灯杆聚点信息图层 -->
    <div *ngIf="showLightLiteLayer" class="lamp-lite-layer">
      <ul class="lamp-lite-info-list">
        <li *ngFor="let item of lightOptions" class="lamp-lite-info-list__item"
          (click)="filterLightLite(item.start, item.end)">
          <nz-badge [nzColor]="item.value" [nzText]="item.label"></nz-badge>
        </li>
      </ul>
    </div>
    <!-- 灯杆信息 -->
    <gis-res-detail [resDetailVisible]="resDetailVisible" [resource]="currentSelectRes"></gis-res-detail>
  </nz-spin>
</div>
<!-- 资源列表 -->
<gis-res-list [resListVisible]="resListVisible" (getResListVisible)="setResListVisible($event)"
  (getLocateRes)="getLocateRes($event)"></gis-res-list>